 <template>
  <div slot="book" style="margin-top: 20px">
    <a-row type="flex" justify="center">
      <a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
        <!-- 统一检索   纸书 -->
        <a-card :headStyle="headStyles" style="width: 100%">
          <search-box style="margin: 20px auto 40px"></search-box>
          <a-row
            type="flex"
            justify="space-around"
            align="middle"
            style="margin: 30px 0px"
          >
            <a-col :xs="23" :sm="23" :md="10" :lg="3" :xl="3">
              <img
                align="center"
                :src="details.cover ? details.cover : details.originalCover"
                width="100%"
                style="margin: 0 auto"
              />
            </a-col>

            <a-col :xs="24" :sm="24" :md="20" :lg="17" :xl="17">
              <a-row>
                <blockquote>
                  <div class="list-group-item-text text-muted" name="author">
                    <p>
                      期刊名称：
                      <span style="color: red">{{ details.resourceName }}</span>
                    </p>
                    <p>
                      出版日期：<span style="color: red">{{
                        details.issueName
                      }}</span>
                    </p>
                    <p>阅读人次： {{ details.play }}</p>
                    <p>出版社： {{ details.press }}</p>
                  </div>
                  <a-row type="flex">
                    <a-col :xs="24" :sm="24" :md="13" :lg="4" :xl="4">
                      <a
                        :href="details.read"
                        target="_blank"
                        title="原版阅读"
                        class="btn btn-success"
                      >
                        原版阅读
                      </a>
                    </a-col>
                    <!-- <a-col :xs="24"
                        :sm="24"
                        :md="13"
                        :lg="4"
                        :xl="4"><a href="/frontend/web/index.php?r=bokan%2Fbokan-read&amp;issueId=118287&amp;t=epub&amp;m=0" target="_blank" title="文字版阅读" class="btn btn-primary"><i class="fa fa-book"></i> 文字版阅读</a></a-col>
                      <a-col :xs="24"
                        :sm="24"
                        :md="13"
                        :lg="4"
                        :xl="4">
                        <a href="/frontend/web/index.php?r=epac%2Flove&amp;bookid=118287&amp;src=bokan&amp;t=BokanIssue" rel="nofollow" class="btn btn-warning ajax-star"><i class="fa fa-heart-o"></i> <span>收藏</span></a>
                      </a-col>
                      <a-col :xs="24"
                        :sm="24"
                        :md="13"
                        :lg="4"
                        :xl="4">
                        <a href="/frontend/web/index.php?r=epac%2Fsuggest&amp;bookid=118287&amp;src=bokan&amp;t=BokanIssue" ref="nofollow" class="btn btn-danger ajax-sugguest"><i class="fa fa-cloud-download"></i><span>推荐购买</span></a>
                      </a-col> -->
                  </a-row>
                </blockquote>
              </a-row>
            </a-col>
          </a-row>
          <div>
            <!-- 期刊简介 -->
            <a-collapse :bordered="true" :showArrow="false">
              <template #expandIcon="props">
                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
              </template>
              <a-collapse-panel
                key="1"
                header="期刊简介《点此展开收起》"
                :style="headStyles"
                :showArrow="false"
              >
                <p>{{ details.text }}</p>
              </a-collapse-panel>
            </a-collapse>
            <!-- 目录 -->
            <a-collapse :bordered="true" :showArrow="false">
              <template #expandIcon="props">
                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
              </template>
              <a-collapse-panel
                key="1"
                header="目录《点此展开收起》"
                :style="headStyles"
                :showArrow="false"
              >
                <a-list
                  item-layout="horizontal"
                  v-for="(item, index) in muluText"
                  :key="index"
                >
                  <template>
                    <a-list-item>
                      <a href="https://www.antdv.com/"
                        >{{ index + 1 }}.{{ item.name }}</a
                      >
                    </a-list-item>
                  </template>
                  <a-list
                    item-layout="horizontal"
                    v-for="(items, indexs) in item.sublevels"
                    :key="indexs"
                  >
                    <template>
                      <a-list-item>
                        <a href="https://www.antdv.com/"
                          >--
                          <span style="margin-left: 10px"
                            >{{ index + 1 }}.{{ indexs + 1
                            }}{{ items.name }}</span
                          ></a
                        >
                      </a-list-item>
                    </template>
                  </a-list>
                </a-list>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import axios from "axios";
// import VueAxios from "vue-axios";
import SearchBox from "./common/SearchBox.vue";
import appApi from "../../../utils/api";
export default {
  data: () => ({
    details: [],
    muluText: Array,
    is_bookinfo_visible: false,
    is_spinning: false,
    header: {},
    body: {},
    info: [],
    headStyles: {
      color: "#2780e3",
      background: "#f5f5f5",
    },
    customStyle: "background:#000,color:#2780e3",
  }),
  watch: {
    book_is_showing() {
      console.log(
        " %c book_is_showing wtach : ",
        "color:brown",
        this.book_is_showing
      );
    },
  },
  components: {
    "search-box": SearchBox,
  },
  computed: {
    getclassname() {
      return this.$store.state.Namedparent.name;
    },
    getquery() {
      console.log(
        this.$store.state[this.$store.state.Namedparent.name].books.detailquery
      );
      return this.$store.state[this.$store.state.Namedparent.name].books
        .detailquery;
    },
  },
  methods: {
    GetBookInfo: function () {
      // this.$router.push({
      //     name: "BookInfo",
      //     params: { id: marc_no },
      //     // params: { id: JSON.stringify(this.$store.rs) },
      // });
      // if (!this.$store.state[this.$store.state.Namedparent.name].books.bookinfo_already_show) {
      //     this.is_bookinfo_visible = true;
      //     this.$emit("showbookid", true);
      //     this.$store.commit("BOOKINFO_ALREADY_SHOW", true);
      //     console.log(
      //         " %c BookList book_is_showing show is true , but  ",
      //         "color:grey;",
      //         this.book_is_showing,
      //         this.bookinfo_title,
      //         this.$store.state[this.$store.state.Namedparent.name].books.bookinfo_already_show,
      //         this.is_bookinfo_visible
      //     );
      // } else {
      //     return;
      // }

      this.is_bookinfo_spinning = true;
      var that = this;
      appApi.bokanissue(that.$store.state[that.$store.state.Namedparent.name].books.detailquery.issueId)
        .then((response) => {
          // 判断设备
          let flag = navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          );
          response.data.read = flag
            ? response.data.wx_read
            : response.data.pc_read;
          that.details = response.data;

          that.is_bookinfo_spinning = false;
        });
      // 获取目录
         appApi.bokanmulu(that.$store.state[this.$store.state.Namedparent.name].books.detailquery.issueId)
        .then((response) => {
          if(response.status == 200){
            that.muluText = response.data;
          }
        });
    },
  },
  mounted() {
    this.$store.commit(
      this.$store.state.Namedparent.name + "/ChangeDetailQuery",
      this.$route.query
    );
    this.GetBookInfo();
    //this.$store.dispatch(this.$store.state.Namedparent.name+'/epacall');
    // console.log(this.muluText)
    // var marc_no = this.$route.params.id;

    // console.log(" %c htis marc_no: ", "color:brown;", marc_no);
    // if (marc_no == this.bookid) {
    // if (!this.is_bookinfo_visible) {
    // this.is_bookinfo_visible = true;
    // this.GetBookInfo(marc_no);
    // this.$emit("ShowBookid", marc_no);
    // }
    // }
  },
};
</script>

<style scoped>
/deep/.ant-collapse {
  margin: 10px auto !important;
}
/deep/.ant-collapse-header {
  color: blueviolet !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  padding: 10px 10px;
  font-size: 15px;
  display: block;
}
.btn-primary {
  color: #ffffff;
  background-color: #2780e3;
  border-color: #2780e3;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-warning {
  color: #ffffff;
  background-color: #ff7518;
  border-color: #ff7518;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #ff0039;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
</style>
